$textareaRadius: 2px;
$textareaFontSize: 14px;

$textareaWidthXL: 320px;
$textareaHeightXL: 40px;
$textareaWidthMD: 242px;
$textareaHeightMD: 32px;
$textareaWidthSM: 82px;
$textareaHeightSM: 26px;

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: $Gray_light;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: $Gray_light;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: $Gray_light;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: $Gray_light;
}

/* xl */
.textarea-xl {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $textareaRadius;
  height: $textareaHeightXL;
  width: $textareaWidthXL;
  background-color: transparent;
  font-size: $textareaFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

.textareaxl:focus {
  border: 1px solid $Primary;
}

.textarea-xl:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

.textarea-xl:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

/* md */
textarea,
.textarea-md {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $textareaRadius;
  height: 64px;
  width: 100%;
  background-color: transparent;
  font-size: $textareaFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

textarea:focus,
.textarea-md:focus {
  border: 1px solid $Primary;
}

textarea:disabled,
.textarea-md:disabled {
  background-color: transparent;
  border: none;
  resize: none;
  color: $Black;
}

textarea:read-only,
.textarea-md:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
  resize: none;
}

/* sm */
.textarea-sm {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $textareaRadius;
  height: $textareaHeightSM;
  width: $textareaWidthSM;
  background-color: transparent;
  font-size: $textareaFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
  caret-color: $Primary;
}

.textarea-sm:focus {
  border: 1px solid $Primary;
}

.textarea-sm:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

.textarea-sm:read-only {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

textarea {
}
